
<template>
  <div>
    <SortableTable v-model="this.getTrainListData()"></SortableTable>
    <p>{{ msg }}</p>

  </div>
</template>

<script>
import axios from 'axios';
import SortableTable from "@/components/SortableTable";
export default {
  name: 'Home',
  components: {SortableTable},
  data() {
    return {
      msg: '',
      trainList: []
    };
  },

  methods: {
    getTrainListData() {
      return {
        head: [
          {label: 'TrainId', prop: 'train_id', type: 'number'},
          {label: 'Accuracy', prop: 'accuracy', type: 'number'},
          {label: 'CountEpoch', prop: 'count_epoch', type: 'number'},
          {label: 'Decay', prop: 'decay', type: 'number'},
          {label: 'ImageHeight', prop: 'image_height', type: 'number'},
          {label: 'ImageWidth', prop: 'image_width', type: 'number'},
          {label: 'LearningRate', prop: 'learning_rate', type: 'number'},
          {label: 'ModelType', prop: 'model_type', type: 'string'},
          {label: 'E-ACCImage', prop: 'epoch_acc_img_name', type: 'image'}
        ],
        body: this.trainList

      }
  },
    getTrainList() {
      const path = 'http://localhost:5000/';
      axios.get(path)
        .then((res) => {
          this.trainList = res.data;
          console.log("trainList")
          console.log(this.trainList)

        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
  created() {
    this.getTrainList()
    console.log(111111111)
    console.log(this.getTrainListData())
  },
};
</script>
<style>
body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-family: Roboto;
}

html {
  scroll-behavior: smooth;
}
</style>